<template>
  <view style="margin:40rpx 20rpx 20rpx 20rpx;background: #fff;position: relative">
    <view class="tabs-box">
      <view class="tab-item" @click="changeTab(0)" :class="{'active':currentTab === 0}">我的菜单</view>
      <view class="tab-item" @click="changeTab(1)" :class="{'active':currentTab === 1}">我的分享</view>
    </view>
    <view class="slider" :style="{transform:`translateX(${currentTab * 100}%)`}"></view>
  </view>
  <view class="m-t-10 content-box" style="padding-bottom: 40rpx">
    <up-swipe-action autoClose>
      <up-swipe-action-item closeOnClick :options="options" v-for="i of 10" :key="i" @click="changeItem">
        <view class="flex p-30" style="border-bottom: 1rpx #eee solid" >
          <up-avatar
              text="北"
              fontSize="20"
              size="40"
              randomBgColor
          ></up-avatar>
          <view style="margin-left: 20rpx">
            <view>王文</view>
            <view class="u-f-sm f-c-9 m-t-10">12.25w粉丝</view>
          </view>
        </view>
      </up-swipe-action-item>
    </up-swipe-action>
  </view>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue'
import {toPath} from "@/util/router/router";


const currentTab = ref(0)
const show = ref(false)
const options = reactive([
  {
    text: '取消关注',
    style: {
      backgroundColor: '#f56c6c'
    }
  }
]);
const changeTab = (index: number) => {
  currentTab.value = index
}

const changeItem = (val) => {

}
</script>


<style scoped lang="scss">
@import "@/static/css/index.css";

.tabs-box {
  position: relative;
  display: flex;
  border-radius: 10rpx;

  .tab-item {
    text-align: center;
    padding: 25rpx 0;
    width: 50%;
    transition: color 0.3s;
    position: relative;
  }

  .active {
    color: #ff6d70;
    transition: color 0.3s;
    border: none;
  }
}

.slider {
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 0;
  height: 3rpx;
  background: #ff6d70;
  z-index: 10;
  transition: transform 0.3s;
}

.content-box {
  background: #fff;
  margin: 20rpx;
}
</style>
